<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu default-active="/index" class="el-menu-demo" mode="horizontal" background-color="#E6A23C"
          text-color="#fff" active-text-color="#000" @select="handleSelect" :ellipsis="false" :router="true">
          <el-menu-item index="/" class="firsttitle">蛋糕商城</el-menu-item>
          <el-menu-item index="/index">首页</el-menu-item>
          <el-menu-item index="/goodslist">全部商品</el-menu-item>
          <el-sub-menu index="3">
            <template #title>热门品类</template>
            <el-menu-item v-for="(types, index) in typelist" :key="index" :index="'/typelist/' + types.id">
              {{ types.name }}
            </el-menu-item>
          </el-sub-menu>

          <div class="flex-grow"></div>
          <!-- 此处使用v-if 根据登录状态改变 -->
          <div v-if="! loginState" :style="{ display: 'inline-flex' }" >
            <el-menu-item index="/authorize/login">登录</el-menu-item>
            <el-menu-item index="/authorize/register">注册</el-menu-item>
          </div>

          <div v-else :style="{ display: 'inline-flex' }">
            <el-menu-item index="/user">{{ store.getters.userInfo.username }}</el-menu-item>
            <el-menu-item index="/shopcar">购物车</el-menu-item>
            <el-menu-item index="/order">订单</el-menu-item>
            <el-menu-item index="/manage" v-if="store.getters.userInfo.isadmin">管理后台</el-menu-item>
            <el-menu-item index="/index" @click="logout">注销</el-menu-item>
          </div>
        </el-menu>
      </el-header>

      <el-main>
        <router-view />
      </el-main>

      <el-footer :style="{ backgroundColor: '#E6A23C' }">
        <p class="footer">
          蛋糕商城 计中职20-1 卢子昂
        </p>

      </el-footer>

    </el-container>

  </div>

</template>
<script setup>
import api from '@/api/api';
import { ElMessage } from 'element-plus';
import { onMounted, ref,computed } from 'vue';
import { useStore } from 'vuex'

const store = new useStore();

const loginState = computed(() => {
  return store.getters.isLogin;

})

const logout = () => {
  store.dispatch('LoginExit');
  ElMessage({
    message: '注销成功...',
    type: 'success'
  })
}

const typelist = ref({})

onMounted(() => {
  api.showTypeList()
    .then(ret => {
      typelist.value = ret.result;
    })
})
</script>
<style scoped>
.firsttitle {
  font-size: 25px;
  font-weight: bolder;
}

.flex-grow {
  flex-grow: 1;
}

.footer {
  text-align: center;
  color: white;
  font-size: 14px;
  margin: 20px 0 0 0;
}
</style>




<script setup>

</script>
